import {useState} from 'react';
import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import {MediaFileInput} from './MediaFileInput.tsx';
import {useFakeMediaStorage, FullscreenPreview} from '../../../storybook';
import {IconButton, Button} from '../../../components';
import {DownloadIcon, FullscreenIcon} from '../../../icons';
import {useBooleanState} from '../../../hooks';

<Meta
  title="Components/Inputs/Media File input"
  component={MediaFileInput}
  args={{
    value: null,
    placeholder: 'Drag and drop to upload or click here',
    clearTitle: 'Clear',
    uploadingLabel: 'Uploading...',
    uploadErrorLabel: 'An error occurred during upload',
  }}
/>

# Media File input

## Usage

Media File input allows the user to enter content when the expected user input is a file.

## Playground

<Canvas>
  <Story name="Standard">
    {args => {
      const [thumbnailUrl, uploader] = useFakeMediaStorage('https://picsum.photos/seed/akeneo/200');
      const [isFullscreenModalOpen, openFullscreenModal, closeFullscreenModal] = useBooleanState();
      const [value, setValue] = useState(null);
      return (
        <>
          <MediaFileInput
            {...args}
            value={value}
            onChange={setValue}
            thumbnailUrl={thumbnailUrl}
            onChange={setValue}
            uploader={uploader}
          >
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          {isFullscreenModalOpen && value && (
            <FullscreenPreview title={value.originalFilename} src={thumbnailUrl} onClose={closeFullscreenModal}>
              <Button href={thumbnailUrl} ghost={true} level="tertiary" target="_blank" download={thumbnailUrl}>
                <DownloadIcon /> Download
              </Button>
            </FullscreenPreview>
          )}
        </>
      );
    }}
  </Story>
</Canvas>

<ArgsTable story="Standard" />

## Variation on size

<Canvas>
  <Story name="Size">
    {args => {
      const file = {
        filePath: '/file/path.jpg',
        originalFilename: 'nice-name.jpg',
      };
      const [thumbnailUrl, uploader] = useFakeMediaStorage('https://picsum.photos/seed/akeneo/200');
      const [isFullscreenModalOpen, openFullscreenModal, closeFullscreenModal] = useBooleanState();
      const [value, setValue] = useState(file);
      return (
        <>
          <MediaFileInput {...args} value={value} thumbnailUrl={thumbnailUrl} onChange={setValue} uploader={uploader}>
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          <MediaFileInput
            {...args}
            size="small"
            value={value}
            thumbnailUrl={thumbnailUrl}
            onChange={setValue}
            uploader={uploader}
          >
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          {isFullscreenModalOpen && value && (
            <FullscreenPreview title={value.originalFilename} src={thumbnailUrl} onClose={closeFullscreenModal}>
              <Button href={thumbnailUrl} ghost={true} level="tertiary" target="_blank" download={thumbnailUrl}>
                <DownloadIcon /> Download
              </Button>
            </FullscreenPreview>
          )}
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on clearable

<Canvas>
  <Story name="Clearable">
    {args => {
      const file = {
        filePath: '/file/path.jpg',
        originalFilename: 'nice-name.jpg',
      };
      const [thumbnailUrl, uploader] = useFakeMediaStorage('https://picsum.photos/seed/akeneo/200');
      const [isFullscreenModalOpen, openFullscreenModal, closeFullscreenModal] = useBooleanState();
      const [value, setValue] = useState(file);
      return (
        <>
          <MediaFileInput
            {...args}
            size="small"
            value={value}
            thumbnailUrl={thumbnailUrl}
            onChange={setValue}
            uploader={uploader}
            clearable={true}
          >
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          <MediaFileInput
            {...args}
            size="small"
            value={value}
            thumbnailUrl={thumbnailUrl}
            onChange={setValue}
            uploader={uploader}
            clearable={false}
          >
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          {isFullscreenModalOpen && value && (
            <FullscreenPreview title={value.originalFilename} src={thumbnailUrl} onClose={closeFullscreenModal}>
              <Button href={thumbnailUrl} ghost={true} level="tertiary" target="_blank" download={thumbnailUrl}>
                <DownloadIcon /> Download
              </Button>
            </FullscreenPreview>
          )}
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on readonly

<Canvas>
  <Story name="Read only">
    {args => {
      const file = {
        filePath: '/file/path.jpg',
        originalFilename: 'nice-name.jpg',
      };
      const [thumbnailUrl, uploader] = useFakeMediaStorage('https://picsum.photos/seed/akeneo/200');
      const [isFullscreenModalOpen, openFullscreenModal, closeFullscreenModal] = useBooleanState();
      return (
        <>
          <MediaFileInput {...args} value={null} readOnly uploader={uploader} thumbnailUrl={thumbnailUrl}>
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          <MediaFileInput {...args} value={file} readOnly uploader={uploader} thumbnailUrl={thumbnailUrl}>
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          <MediaFileInput {...args} value={null} size="small" readOnly uploader={uploader} thumbnailUrl={thumbnailUrl}>
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          <MediaFileInput {...args} value={file} size="small" readOnly uploader={uploader} thumbnailUrl={thumbnailUrl}>
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          {isFullscreenModalOpen && file && (
            <FullscreenPreview title={file.originalFilename} src={thumbnailUrl} onClose={closeFullscreenModal}>
              <Button href={thumbnailUrl} ghost={true} level="tertiary" target="_blank" download={thumbnailUrl}>
                <DownloadIcon /> Download
              </Button>
            </FullscreenPreview>
          )}
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on invalid

<Canvas>
  <Story name="Invalid">
    {args => {
      const file = {
        filePath: '/file/path.jpg',
        originalFilename: 'invalid-image.jpg',
      };
      const [thumbnailUrl, uploader] = useFakeMediaStorage('https://picsum.photos/seed/akeneo/200');
      const [isFullscreenModalOpen, openFullscreenModal, closeFullscreenModal] = useBooleanState();
      const [value, setValue] = useState(file);
      return (
        <>
          <MediaFileInput
            {...args}
            value={value}
            thumbnailUrl={thumbnailUrl}
            onChange={setValue}
            uploader={uploader}
            invalid={true}
          >
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          <MediaFileInput
            {...args}
            size="small"
            value={value}
            thumbnailUrl={thumbnailUrl}
            onChange={setValue}
            uploader={uploader}
            invalid={true}
          >
            <IconButton
              href={thumbnailUrl}
              target="_blank"
              download={thumbnailUrl}
              icon={<DownloadIcon />}
              title="Download"
            />
            <IconButton icon={<FullscreenIcon />} title="Fullscreen" onClick={openFullscreenModal} />
          </MediaFileInput>
          {isFullscreenModalOpen && value && (
            <FullscreenPreview title={value.originalFilename} src={thumbnailUrl} onClose={closeFullscreenModal}>
              <Button href={thumbnailUrl} ghost={true} level="tertiary" target="_blank" download={thumbnailUrl}>
                <DownloadIcon /> Download
              </Button>
            </FullscreenPreview>
          )}
        </>
      );
    }}
  </Story>
</Canvas>
